<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <Header>
        <div class="logo"/>
      </Header>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item v-if="!item.children" v-for="(item,index) in menulist" :key="item.id">
          <a-icon :type="item.icon"/>
          <span>{{ item.title }}</span>
          <router-link :to="item.uri"></router-link>
        </a-menu-item>
        <a-sub-menu :key="'sub'+index" v-else>
          <span slot="title"><a-icon :type="item.icon"/><span>{{ item.title }}</span></span>
          <a-menu-item v-for="(subItem,subIndex) in item.children" :key="subItem.id">
            <a-icon :type="subItem.icon"/>
            <span>{{ subItem.title }}</span>
            <router-link :to="subItem.uri"></router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-space>
          <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
          />
          <a-button type="danger" @click="logout">退出</a-button>
        </a-space>
      </a-layout-header>
      <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '512px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data () {
    return {
      // 左侧菜单数据
      menulist: [],
      collapsed: false
    }
  },
  mounted () {
    this.fetchMenus()
  },
  methods: {
    logout () {
      localStorage.clear()
      this.$router.replace({ path: '/login' })
    },
    fetchMenus () {
      this.$http.get('api/admin/users/menus').then((result) => {
        this.menulist = result
      })
    }
  }
}
</script>

<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
